<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<body>

<form class="form-inline container-fluid">
    <div class="form-group">
        <p class="form-control-static">请输入需要查找的姓名</p>
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputName">Email address</label>
        <input type="name" class="form-control" id="inputName" placeholder="Name">
    </div>
    <button type="submit" class="btn btn-info" id="findName">查找</button>
    <button type="submit" class="btn btn-success" id="restButton">复位</button>
</form>

<div class="container-fluid">
<button type="button" class="btn btn-success"></button>
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody id="studentTb">

        </tbody>
    </table>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/pagejs/studnet/list.js"></script>
<script type="text/javascript">
//ajax 前端后端进行数据交换最重要的工具 在后台异步的加载数据  根据需要只更新部分的网页（按需刷新技术）
    $(function(){
        $.ajax({
            url:'/webapi/student/list'

        }).done(function(rs){
            var len=rs.length;

            var html="";

            for(var i=0 ; i < len ; i++){

                var item=rs[i];

                html+="<tr>"
                    +"<td>"+item.id+"</td>"
                    +"<td>"+item.name+"</td>"
                    +"<td>"+item.no+"</td>"
                    +"<td>"+item.sex+"</td>"
                    +"<td>"+item.age+"</td>"

                    +"</tr>";
            }

            $("#studentTb").html(html);
        })
    })

    let but1 = document.getElementById("findName");
    let but2 = document.getElementById("restButton");

    but1.onclick = function () {
        let test=$("#inputName").val();
        $.ajax({
            url:'/webapi/student/name',
            data:{
                name:test,
            }
        }).done(function (rs){
            let len=rs.length;
            let html="";
            for(let i=0;i<len;i++){
                let iten=rs[i];
                html+="<tr>"
                    +"<td>"+iten.id+"</td>"
                    +"<td>"+iten.name+"</td>"
                    +"<td>"+iten.no+"</td>"
                    +"<td>"+iten.sex+"</td>"
                    +"<td>"+iten.score+"</td>"
                    +"</tr>";
            }
            $("#studentTb").html(html);
        })
        return false;
    }

    but2.onclick = function () {
        document.getElementById("inputName").value='';
        $.ajax({
            url:'/webapi/student/list'
        }).done(function (rs){
            let len=rs.length;
            let html="";
            for(let i=0;i<len;i++){
                let iten=rs[i];
                html+="<tr>"
                    +"<td>"+iten.id+"</td>"
                    +"<td>"+iten.name+"</td>"
                    +"<td>"+iten.no+"</td>"
                    +"<td>"+iten.sex+"</td>"
                    +"<td>"+iten.score+"</td>"
                    +"</tr>";
            }
            $("#studentTb").html(html);
        })
        return false;
    }


</script>
</body>
</html>